<div>
    <div class="row">
        <div class="col-md-12">
            <div class="card admin-content-type-edit">
                <div class="card-header">
                    <i class="fa fa-align-justify edit-content-type"></i> Edit Module: {{ data.moduleDef.title }}
                </div>

                <div class="card-body">

                    <script type='text/javascript'>
                        let moduleDef = {{{ json data.moduleDef }}};
                        window.onload = function () {
                            Formio.createForm(document.getElementById('moduleDefForm'), {
                                components: [
                                    {
                                        type: 'textfield',
                                        key: 'title',
                                        label: 'Content Type Title',
                                        placeholder: 'Enter the title of your new content type (ie: Blog, News, Public Service).',
                                        input: true
                                    },
                                    {
                                        type: 'textfield',
                                        key: 'systemId',
                                        label: 'SystemId',
                                        placeholder: 'Enter the slug to be used as the system id (ie: blog, news, public-service)',
                                        input: true
                                    },
                                    {
                                        type: 'textfield',
                                        key: 'version',
                                        label: 'Version',
                                        placeholder: 'Version of the module',
                                        input: true
                                    },
                                    {
                                        type: 'textfield',
                                        key: 'icon',
                                        label: 'Icon',
                                        placeholder: 'bi-gear',
                                        input: true
                                    },
                                    {
                                        type: 'checkbox',
                                        key: 'enabled',
                                        label: 'Enabled',
                                        input: true
                                    },
                                    {
                                        type: 'checkbox',
                                        key: 'canBeAddedToColumn',
                                        label: 'Can Be Added To Column',
                                        input: true
                                    },
                                    {
                                        type: 'checkbox',
                                        key: 'singleInstance',
                                        label: 'Single Instance Per Site',
                                        input: true
                                    },
                                    {
                                        type: 'button',
                                        action: 'submit',
                                        label: 'Save Title & SystemId',
                                        theme: 'primary'
                                    }
                                ]
                            })
                                    .then(async function (form) {

                                        form.submission = {
                                            data: {
                                                title: moduleDef.title,
                                                systemId: moduleDef.systemId,
                                                icon: moduleDef.icon,
                                                enabled: moduleDef.enabled,
                                                canBeAddedToColumn: moduleDef.canBeAddedToColumn,
                                                singleInstance: moduleDef.singleInstance,
                                                version: moduleDef.version
                                            }
                                        };
                                        form.on('submit', async function (submission) {

                                            await dataService.moduleEdit(submission);
                                            window.location.replace('/admin/modules/edit/' + submission.data.systemId);

                                        });
                                    });
                        }
                    </script>

                    <div id="moduleDefForm"></div>
                </div>

            </div>

        </div>
        <!--/.col-->
    </div>


    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#fields" role="tab" aria-controls="home"
               aria-selected="true">Content Types</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="raw-tab" data-toggle="tab" href="#raw" role="tab" aria-controls="raw"
               aria-selected="true">Raw</a>
        </li>
        <!-- <li class="nav-item">
          <a class="nav-link " id="shortcode-tab" data-toggle="tab" href="#shortcode" role="tab" aria-controls="shortcode"
            aria-selected="false">Shortcode</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " id="profile-tab" data-toggle="tab" href="#views" role="tab" aria-controls="profile"
            aria-selected="false">Views</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " id="profile-tab" data-toggle="tab" href="#permissions" role="tab" aria-controls="profile"
            aria-selected="false">Permissions</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="contact-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="contact"
            aria-selected="false">Settings</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="contact-tab" data-toggle="tab" href="#create" role="tab" aria-controls="contact"
            aria-selected="false">Create Instance</a>
        </li> -->
    </ul>
    <div class="tab-content" id="myTabContent">

        <div class="tab-pane fade show active" id="fields" role="tabpanel" aria-labelledby="home-tab">


            <div class="card">
                <div class="card-header">
                    <i class="fa fa-align-justify"></i> Content Types
                    <a href="javascript:void(0)" onclick="loadCreateContentTypeForm(); openNewContentTypeModal()"
                       class="btn btn-success float-right new-content-type">New Content Type</a>
                </div>
                <div class="card-body page-list">

                    <table class="table table-responsive-sm table-striped">
                        <thead>
                        <tr>
                            <th>Title</th>
                            <th>Module</th>
                            <th>Edit</th>
                        </tr>
                        </thead>
                        <tbody>

                        {{#each data.contentTypes}}
                            <tr>
                                <td aria-label="content-type-{{ this.systemId }}"><a
                                        href="/admin/content-types/edit/{{ this.systemId }}">{{ this.title }}</a></td>
                                <td>
                                    <a href="/admin/modules/edit/{{ this.moduleSystemId }}">{{ this.moduleSystemId }}</a>
                                </td>
                                <td>
                                    <a class="btn btn-sm btn-primary rmargin"
                                       href="/admin/content-types/edit/{{ this.systemId }}">Edit</a>

                                    <a tabindex="0" class="btn btn-sm btn-danger" role="button" data-html="true"
                                       data-toggle="popover"
                                       data-trigger="focus" aria-label="Delete {{ this.title }}"
                                       title="Delete <b>{{ this.title }}</b> Forever?" data-content="<a href='
                        /contentType/{{ this.systemId }}/{{../data.sessionID}}' class='btn btn-sm btn-danger rmargin custom-delete'>Confirm Delete</a>
                      ">Delete</a>

                                </td>
                            </tr>
                        {{/each}}
                        </tbody>
                    </table>

                </div>
            </div>


        </div>
        <div class="tab-pane fade show" id="raw" role="tabpanel" aria-labelledby="raw-tab">

            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-align-justify"></i> Manage Fields

                    </div>
                    <div class="card-body">

                        <div id="editor-container">

                            <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

                            <div id="jsoneditorRaw" style="width: 100%; height: 600px;"></div>

                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="button" class="btn btn-success pull-right" onclick="onContentTypeRawSave()">
                            Save Json
                        </button>
                    </div>
                </div>

            </div>


        </div>
        <div class="tab-pane fade show" id="shortcode" role="tabpanel" aria-labelledby="shortcode-tab">
            <div class='shortcode'><span>Shortcode: </span>{{shortcode}}</div>
        </div>
        <div class="tab-pane fade show" id="views" role="tabpanel" aria-labelledby="profile-tab">
            <app-content-type-edit-views></app-content-type-edit-views>
        </div>
        <div class="tab-pane fade show" id="permissions" role="tabpanel" aria-labelledby="profile-tab">
            <app-content-type-edit-permissions></app-content-type-edit-permissions>
        </div>
        <div class="tab-pane fade show" id="settings" role="tabpanel" aria-labelledby="contact-tab">
            <app-content-type-edit-settings></app-content-type-edit-settings>
        </div>
        <div class="tab-pane fade show" id="create" role="tabpanel" aria-labelledby="home-tab">
            <app-content-type-edit-create-instance></app-content-type-edit-create-instance>
        </div>
    </div>


    <!-- Section Editor Modal -->
    <div class="modal fade" id="newContentTypeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New Content Type</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <script type='text/javascript'>
                        function loadCreateContentTypeForm() {
                            Formio.createForm(document.getElementById('createContentTypeForm'), {
                                components: [
                                    {
                                        type: 'textfield',
                                        key: 'title',
                                        label: 'Content Type Title',
                                        placeholder: 'Enter the title of your new content type (ie: Blog, News, Public Service).',
                                        input: true
                                    },
                                    {
                                        type: 'textfield',
                                        key: 'systemId',
                                        label: 'System Id',
                                        placeholder: 'Enter the slug to be used as the system id (ie: blog, news, public-service)',
                                        input: true,
                                        calculateValue: "value = helperService.slugify(data.title);",
                                    },
                                    {
                                        type: 'textfield',
                                        key: 'moduleSystemId',
                                        label: 'Module System Id',
                                        input: true
                                    },
                                    {
                                        type: 'button',
                                        action: 'submit',
                                        label: 'Create',
                                        theme: 'primary'
                                    }
                                ]


                            })
                                    .then(async function (form) {

                                        form.submission = {
                                            data: {moduleSystemId: "{{ data.moduleDef.systemId }}"}
                                        };

                                        form.on('submit', async function (submission) {
                                            var accessToken = '{{ this.accessToken }}';
                                            dataService.contentTypeCreate(submission.data).then(() => {
                                                fullPageUpdate();
                                            })
                                        });
                                    });
                        }
                    </script>

                    <div id="createContentTypeForm"></div>

                </div>
                {{!-- <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success wysiwyg-save" onclick='saveNewContentType()'
                  data-dismiss="modal">Create</button>
              </div> --}}
            </div>
        </div>
    </div>
